<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>Document</title>
</head>
<!-- 组件就是封装好的结构样式逻辑代码的一个功能性代码,重用,分治 -->

<body>
    <!-- 组件也是一个vue实例  vue实例也是一个组件 -->
    <div id='app'>
        <world></world>
    </div>
    <template id="tpl">
        <div>
            <strong @click="handle">孔子东游,见两小儿辩日...{{msg}}</strong>
            <span>111</span>
            <p>你好</p>
            <ins>下划线</ins>
        </div>

    </template>

    <script src='../js/vue.js'></script>
    <script>

        // 注册组件  Vue.component('组件名',{配置对象})
        Vue.component('world', {
            template: "#tpl",
            // 1.组件的data一定是一个函数,并且返回一个对象
            // 2.组件的template必须有且只有一个根节点
            // 3.template可以使用模板字符串
            data() {
                return {
                    msg: '日初出大如车盖'
                }
            },
            methods: {
                handle() {
                    console.log(this);
                    this.msg = '123'
                }
            }
        })

        const vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
        })


    </script>
</body>

</html>